<template>
  <el-dialog :close-on-click-modal="false"
             :visible.sync="visible"
             @close="close_dialog"
             :show-close="false"
             class="custom_dialog_box"
             width="30%">
    <div slot="title"
         style="display: flex;justify-content: space-between;">
      <div style="font-size:18px">{{dialogType == 'add' ? '新增' : dialogType == 'edit' ? '编辑' : '查看'}}</div>
      <div>
        <el-button size="mini"
                   type="info"
                   plain
                   @click="close_dialog">关闭</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="handle_add"
                   v-if="dialogType == 'add'"
                   plain>确认新增</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="handle_edit"
                   v-if="dialogType == 'edit'"
                   plain>确认修改</el-button>
      </div>
    </div>
    <el-row>
      <el-form :model="form_data"
               :rules="form_rules"
               ref="rule_form"
               label-width="60px"
               size="mini">
        <el-col>
          <el-form-item label="名称"
                        prop="label">
            <el-input v-model="form_data.label"
                      style="width: 100%"
                      maxlength="200"
                      :disabled="is_disabled"
                      placeholder="必填: "></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="规格"
                        prop="spec">
            <el-input v-model="form_data.spec"
                      style="width: 100%"
                      maxlength="200"
                      :disabled="is_disabled"
                      placeholder="必填: "></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上级"
                        prop="parentName">
            <el-popover ref="treeListPopover"
                        placement="bottom-start"
                        trigger="click">
              <el-tree :data="treeList"
                       node-key="categoryId"
                       ref="treeList"
                       @current-change="change_tree"
                       :default-expand-all="true"
                       :highlight-current="true"
                       :expand-on-click-node="false">
              </el-tree>
            </el-popover>
            <el-input v-model="form_data.parentName"
                      v-popover:treeListPopover
                      :readonly="true"
                      placeholder="点击选择上级"
                      class="menu-list__input"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'

export default {
  data () {
    return {
      visible: false,
      dialogType: "",
      form_data: {
        label: '',
        spec: ''
      },

      form_rules: {
        label: [
          { required: true, message: '必填: ', trigger: 'blur' }
        ],
        spec: [
          { required: true, message: '必填: ', trigger: 'blur' }
        ]
      },
      is_disabled: false,
      treeList: []
    }
  },
  methods: {
    // 初始化
    init (id, type) {
      this.dialogType = type;
      this.visible = true;
      this.tree_select();

      if (type == 'add') {

      }

      if (type == 'view') {   // 查看
        this.is_disabled = true;
        this.getInfo(id);
      };
      if (type == 'edit') {   // 修改
        this.getInfo(id);
      };


      // this.$nextTick(() => {
      //   this.$refs['rule_form'].resetFields();
      // });
    },

    // 种类树结构
    tree_select () {
      this.$http({
        url: this.$http.adornUrl('/goods/category/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.treeList = treeDataTranslate(data.goodsCategoryList, 'categoryId');
        console.log("this.treeList", this.treeList);
      })
    },


    // 接口: 新增
    handle_add () {
      this.$refs['rule_form'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/goods/category/save`),
            method: 'post',
            data: this.$http.adornData({
              'label': this.form_data.label,
              'spec': this.form_data.spec,
              'parentId': this.form_data.parentId,
            })
          }).then(({ data }) => {
            console.log("data:", data);
            if (data.code == 0) {
              this.$emit("close");
              this.$emit("updateTable");
            }
          }).then(() => {
            this.treeListTreeSetCurrentNode();
          })
        } else {
          this.$message.error('请填写完整表单')
        }
      })
    },

    // 接口: 修改
    handle_edit () {
      this.$refs['rule_form'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/banner/update`),
            method: 'post',
            data: this.$http.adornData({
              'bannerId': this.form_data.bannerId,
              'name': this.form_data.name,
              'url': this.form_data.url,
              'type': this.form_data.type,
              'color': this.form_data.color
            })
          }).then(({ data }) => {
            console.log("data:", data);
            if (data.code == 0) {
              this.$emit("close");
              this.$emit("updateTable");
            }
          })
        } else {
          this.$message.error('请填写完整表单')
        }
      })
    },

    // 详情
    getInfo (bannerId) {
      this.$http({
        url: this.$http.adornUrl(`/banner/info/${bannerId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data.code == 0) {
          if (data.code == 0) {
            this.form_data = data.banner;
          }
        }
      })
    },

    change_tree (data) {
      console.log(data);
      this.form_data.parentId = data.categoryId
      this.form_data.parentName = data.label
    },
    // 菜单树设置当前选中节点
    treeListTreeSetCurrentNode () {
      this.$refs.treeList.setCurrentKey(this.form_data.parentId)
      this.form_data.parentName = (this.$refs.treeList.getCurrentNode() || {})['label']
    },

    // 关闭模态框
    close_dialog () {
      this.$emit("close");
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .is-disabled {
  .el-input__inner {
    background-color: #fff !important;
    color: #303133 !important;
  }
  .el-textarea__inner {
    background-color: #fff !important;
    color: #303133 !important;
  }
  .el-radio__inner {
    background-color: #fff !important;
  }
  .el-checkbox__inner {
    background-color: #fff !important;
  }
  .el-checkbox__label {
    color: #303133 !important;
  }
  .el-radio__label {
    color: #303133 !important;
  }
  .el-range-input {
    background-color: #fff !important;
    color: #303133 !important;
  }
}
</style>